<template>
  <view class="page">
    <!-- <block v-if="type === 'save' || type === 'add-success'"> -->
    <view class="con" @click="show = true">
      <view class="flex" style="border: none;justify-content: space-between;">
        <view class="flex-title" @click="handleNav('/pagesB/active/TickeSetting')">退款设置</view>
        <input type="text" placeholder="" disabled :value="form.title" />
      </view>
    </view>
    <!-- </block> -->
    <block v-if="type === 'add'">
      <view class="k"></view>
      <view class="con-box">
        <view class="box">
          <view class="title">详细信息</view>
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>票种名称</view> <input type="text" placeholder="请输入" maxlength="20"
            v-model="form_info.ticket_name" />
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>票价</view> <input type="text" placeholder="免费填0，有人报名后不能修改"
            maxlength="20" v-model="form_info.price" />
          <view class="tt">元</view>
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>会员价</view> <input type="text" placeholder="无会员价可不填" maxlength="20"
            v-model="form_info.vip_price" />
          <view class="tt">元</view>
        </view>
        <view class="flex">
          <view class="flex-title"><span>*</span>票种数量</view> <input type="num" placeholder="请输入" maxlength="20"
            v-model="form_info.number" />
        </view>
        <view class="flex" @click="handleTime('start')">
          <view class="flex-title"><span>*</span>开始时间</view> <input type="number" placeholder="请选择>" maxlength="20"
            disabled v-model="form_info.start_date" />
        </view>
        <view class="flex" @click="handleTime('end')">
          <view class="flex-title"><span>*</span>结束时间</view> <input type="number" placeholder="请选择>" maxlength="20"
            disabled v-model="form_info.end_date" />
        </view>
        <view class="flex" style="border: none;">
          <view class="flex-title"><span>*</span>限购数量</view>
        </view>
        <view class="flex">
          <view class="flex-title">
            <input type="number" placeholder="请输入"
              style="width: 125rpx;height: 52rpx;border:1rpx solid#797979;border-radius: 62rpx;text-align: center;"
              v-model="form_info.min_restricting_purchases" />
            <view class="tt">张起售，每人最多购买</view><input type="number" placeholder="请输入"
              style="width: 125rpx;height: 52rpx;border:1rpx solid#797979;border-radius: 62rpx;text-align: center;"
              v-model="form_info.max_restricting_purchases" />
          </view>
        </view>
        <view class="box">
          <view class="title">票种说明</view>
        </view>
        <u-textarea v-model="form_info.desc" placeholder="例如：本票含餐饮、住宿......" showConfirmBar adjustPosition
          maxlength="30"></u-textarea>
      </view>
    </block>
    <block v-if="type === 'add-success'">
      <view class="k"></view>
      <view class="box" v-for="(item, index) in list" :key="item.id">
        <view class="con-box" style="margin-top: 20rpx;">
          <view class="box">
            <view class="title">报名设置</view>
            <view class="tt">票种名称：{{ item.ticket_name }}</view>
            <view class="tt" style="margin-top: 16rpx;">票价：{{ item.price }}，总票数：{{ item.number }}</view>
            <view class="tt">{{ item.desc }}</view>
          </view>
          <view class="xian"></view>
          <view class="flex-right">
            <view class="right-btn" @click="handledelete(item)">删除</view>
            <view class="right-btn" @click="handleEdit(item)">编辑</view>
          </view>
        </view>
      </view>
    </block>
    <view class="add" @click="type = 'add'" v-if="type === 'save' || type === 'add-success'">
      <view class="add-icon">+</view>
      添加票种
    </view>
    <view class="bottom-flex">
      <view class="btn-save" @click="handleSave">保存</view>
    </view>
    <u-datetime-picker :show="showTime" v-model="dayTime" mode="datetime" @confirm="handleConfirmTime"
      @cancel="showTime = false"></u-datetime-picker>
    <u-picker :show="show" :columns="columns" @confirm="confirm" keyName="desc" @cancel="show = false"></u-picker>
  </view>
</template>
<script>
import { getActivitySetRefundList, setRefund, getTicketTypeList, setTicketType, delTicketType } from "@/utils/request.js";
import helper from "@/utils/helper.js";
import { onReachBottom } from "uview-ui/libs/mixin/mixin";
export default {
  data() {
    return {
      show: false,
      form: {
        title: "不可退款",
        keys: '',
        id: ''
      },
      dayTime: helper.formatTime(new Date()),
      form_info: {
        activity_id: '',
        ticket_name: '',
        price: '',
        vip_price: '',
        number: '',
        start_date: '',
        end_date: '',
        min_restricting_purchases: "",
        max_restricting_purchases: '',
        desc: ""
      },
      showTime: false,
      type: "save",
      columns: [],
      id: '',
      query: {
        activity_id: '',
        p: 0,
        n: 8,
      },
      total: 0,
      list: [],
    };
  },
  watch: {
    type(newVal, oldVal) {
      console.log("新的值：" + newVal + ", 旧的值：" + oldVal);
    },
  },
  onLoad(option) {
    this.query.activity_id = option.id||13
    this.form_info.activity_id = option.id||13
    this.form.id = option.id||13
    this.getRefundList();
    this.getList()
  },
  onReachBottom() {
    if (this.list.length < this.total) {
      this.query.p++
      this.getList()
    }
  },
  methods: {
    async getActivitySetRefundList(data) {
      return await getActivitySetRefundList(data);
    },
    async delTicketType(data) {
      return await delTicketType(data);
    },
    async getTicketTypeList(data) {
      return await getTicketTypeList(data)
    },
    async setRefund(data) {
      return await setRefund(data);
    },
    async setTicketType(data) {
      return await setTicketType(data);
    },
    handledelete(item) {
      const data = { id: item.id }
      this.delTicketType(data).then(res => {
        if (res.code == 200) {
          this.query.p = 0
          this.list = []
          this.getList()
        }
      })
    },
    handleTime(type) {
      this.typeTime = type;
      this.showTime = true;
    },
    getList() {
      this.getTicketTypeList(this.query).then(res => {
        if (res) {
          this.total = res.count
          this.list = [...res.list, ...this.list]
          if (this.list.length > 0) {
            this.type = 'add-success'
          } else {
            this.type = 'save'
          }
        }
      })
    },
    objectToArray(obj) {
      return Object.keys(obj).map(key => obj[key]);
    },
    getRefundList() {
      this.getActivitySetRefundList().then((res) => {
        if (res.list) {
          this.columns = [this.objectToArray(res.list)]
          this.form.title = this.columns[0][0].desc
          this.form.activity_set_refund_keys = this.columns[0][0].keys
        }
      });
    },
    handleEdit(item) {
      this.form_info = item
      this.type = 'add'
    },
    handleConfirmTime(e) {
      const type = typeof e.value;
      let selectedDate = "";
      if (type === "string") {
        selectedDate = e.value;
      } else {
        selectedDate = helper.timestampToDateString(e.value);
      }
      if (this.typeTime === "start") {
        if (new Date(selectedDate) > new Date(this.form.endTime)) {
          uni.showToast({
            title: "开始时间不能大于结束时间",
            icon: "none",
          });
          return;
        }
        this.form_info.start_date = helper.formatDate(e.value);
      } else {
        if (new Date(selectedDate) < new Date(this.form.startTime)) {
          uni.showToast({
            title: "结束时间不能小于开始时间",
            icon: "none",
          });
          return;
        }
        this.form_info.end_date = helper.formatDate(e.value);
      }
      this.showTime = false;
    },
    handleSave() {
      console.log(this.type, "this.type");
      if (this.type === "add") {
        if (!this.form_info.ticket_name || !this.form_info.price || !this.form_info.number || !this.form_info.start_date || !this.form_info.start_date || !this.form_info.end_date || !this.form_info.min_restricting_purchases || !this.form_info.max_restricting_purchases || !this.form_info.desc) {
          uni.showToast({
            title: "请输入完整信息",
            icon: 'none'
          })
          return;
        }
        if (this.form_info.ticket_name.length < 4) {
          uni.showToast({
            title: "票种名称长度在4~20个字符之间",
            icon: 'none'
          })
          return;
        }
        if (this.form_info.min_restricting_purchases > this.form_info.max_restricting_purchases) {
          uni.showToast({
            title: "起售数量不能大于最多购买数量",
            icon: 'none'
          })
          return;
        }
        this.setTicketType(this.form_info).then(res => {
          if (res.code == 200) {
            this.type = "add-success";
            this.query.p = 0
            this.list = []
            this.getList()
            this.form_info = {
              ticket_name: '',
              price: '',
              vip_price: '',
              number: '',
              start_date: '',
              end_date: '',
              min_restricting_purchases: "",
              max_restricting_purchases: '',
              desc: "",
              activity_id: this.query.activity_id
            }
          } else {
            this.type = 'add'
          }
        })
      } else if (this.type === "add-success") {
        this.setRefund(this.form).then(res => {
          if (res.code == 200) {
            uni.setStorageSync('setTicket', true)
            uni.navigateBack({
              delta: 1
            });
          }
        })
      } else if (this.type === "save") {
        uni.showToast({
          title: "请先添加票种",
          icon: "none",
          mask: true,
        });
      }
    },
    confirm(e) {
      this.form = {
        title: e.value[0].desc,
        keys: e.value[0].keys,
      };
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  background-color: #ffffff;
}

.k {
  width: 100%;
  height: 20rpx;
}

.add {
  margin: 20rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  color: #ffb850;

  .add-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: #ffb850;
    border-radius: 50%;
    font-size: 36rpx;
    text-align: center;
    line-height: 33rpx;
    color: #ffffff;
    margin-right: 10rpx;
  }
}

.flex {
  width: 92%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f2f2f2;

  input {
    font-size: 25rpx;
    text-align: right;
    flex: 1;
  }
}

.flex-title {
  font-size: 25rpx;
  display: flex;
  align-items: center;

  span {
    color: #d9001b;
  }
}

.tt {
  font-size: 25rpx;
  margin-left: 6rpx;
}

.con-box {
  width: 694rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 0 auto;

  .flex-right {
    display: flex;
    width: 92%;
    margin: 16rpx auto 0;
    justify-content: flex-end;
    padding: 16rpx 0 20rpx 0;

    .right-btn {
      width: 135rpx;
      height: 57rpx;
      border-radius: 32rpx;
      border: 1rpx solid#FFB850;
      font-size: 24rpx;
      line-height: 57rpx;
      text-align: center;
      margin-left: 26rpx;
      color: #ffb850;
    }
  }

  .xian {
    width: 100%;
    height: 1rpx;
    background-color: #f2f2f2;
  }

  .box-1 {
    width: 90%;
    margin: 0 auto;
    padding: 40rpx 0 20rpx 0;
    display: flex;

    image {
      width: 97rpx;
      height: 97rpx;
      border-radius: 50%;
      background: #ccc;
    }

    .box-right {
      flex: 1;
      margin-left: 12rpx;
      font-size: 27rpx;

      .box-nei {
        font-size: 18rpx;
        margin-top: 20rpx;

        span {
          padding: 2rpx 6rpx;
          border-radius: 8rpx;
          border: 1rpx solid#FFB850;
          color: #ffb850;
          margin-right: 30rpx;
          font-size: 20rpx;
        }
      }
    }
  }

  .box {
    width: 633rpx;
    margin: 0 auto;
    padding: 24rpx 0;
    font-size: 28rpx;
  }

  ::v-deep.u-upload {
    margin: 12rpx auto 0;
    width: 350rpx;
    height: 350rpx;
    background-color: #ffe7ca;
    border-radius: 12rpx;
    margin-top: 30rpx;

    .upload {
      width: 350rpx;
      height: 350rpx;
      text-align: center;
      font-size: 25rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      image {
        width: 138rpx;
        height: 118rpx;
      }

      .tip {
        margin-top: 8rpx;
        color: #797979;
      }
    }
  }
}

::v-deep.u-textarea {
  width: 92%;
  margin: 0rpx auto;
  padding-bottom: 26rpx;
  border: none;
  font-size: 25rpx !important;

  .u-textarea__field {
    font-size: 25rpx !important;
  }
}

.bottom-flex {
  width: 100%;
  height: 105rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;

  .btn-save {
    width: 694rpx;
    height: 65rpx;
    background-color: #ffb850;
    border-radius: 62rpx;
    font-size: 25rpx;
    color: #ffffff;
    text-align: center;
    line-height: 65rpx;
  }
}
</style>